<template>
  <div class="me">
      <div class="flex_space">
            <div class="header flex_start">
                <img :src="img">
                <div class="text">
                    <span class="text_name">{{name}}</span>
                    <span class="text_content">签名：{{signature}}</span>
                </div>
            </div>
            <div class="button" @click="clickNuu()">
                <span>取消关注</span>
            </div>

      </div>
      <div class="flex_space user_tip">
          <div class="flex_start">
              <div>认证： <van-tag plain size="15px">{{tag}}</van-tag></div>
          </div>
          <div>关注{{attention}}人</div>
      </div>


    <div class="title flex_space">
      <div class="mix_title">我的发布</div>
      <div class="flex_start">
        <span class="min_font">全部</span>
        <van-icon name="arrow" size="15"></van-icon>
      </div>
    </div>
    <router-link to="/release">
        <div class="panel-list" v-for="item in  list " :key="item.id">
        <div class="card_header">
            <div class="flex_start">
            <div>{{item.title}}</div>
            </div>
            <img v-if="item.img" :src="item.img" width="100" height="50">
        </div>
        <div class="card_header">
            <div class="min_size">发帖时间：{{item.time}}</div>
            <div class="min_size flex_start">
            <span>浏览{{item.browseNum}}人</span>
            <span>评论{{item.reviewNum}}人</span>
            </div>
        </div>
        </div>
    </router-link>
  </div>
</template>
<script>
import { Icon,Button,Tag } from "vant";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
      [Tag.name]: Tag,
    
  },
  data() {
    return {
      img:
        "https://img.52z.com/upload/news/image/20180129/20180129092451_31905.jpg",
      name: "萌萌哒",
      signature: "世间无论什么都很优秀",
      fansNum: 999,
      zan: 100,
      isCertification: "无",
      friends: 111,
      circle: 22,
      topic: 222,
      ground: 111,
      tag:'资深风水师',
      attention:1111,
      list:[
            {
                id:'0',
                title:'大多数人们喜欢的户型有哪些?',
                time:'2019年5月14日',
                img:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D790/sign=1cf755a396ef76c6d0d2f922ad17fdf6/b03533fa828ba61e51f94fad4734970a304e5919.jpg',
                browseNum:50,
                reviewNum:20,
                totalAll:666,
            },
                
        ],
    };
  }
};
</script>
<style lang="less" scoped>
.me {
  background-color: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
  .header {
    margin-top: 5px;
    margin-bottom: 5px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .text {
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      .text_name {
        font-size: 14px;
        display: inline-block;
      }
      .text_content {
        font-size: 12px;
        color: #e5e5e5;
      }
    }

  }
    .button{
        padding: 3px 5px;
        box-sizing: border-box;
        width: 60px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid red;
        cursor: pointer;
        span{
            display: inline-block;
            font-size: 12px;
            color: red;
        }
    }
    .user_tip{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 13px;
    }
  .massage {
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .Focus {
    margin-top: 5px;
    margin-bottom: 10px;
    .van-icon {
      margin-left: 10px;
    }
  }
  .title {
    .min_title {
      font-size: 13px;
    }
    .min_font {
      font-size: 12px;
    }
  }
  .panel-list {
    margin-top: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px 10px;
    box-sizing: border-box;
    .card_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }    
  }
}
.flex_space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.flex_around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.tip_title {
  font-size: 14px;
}
.size {
  font-size: 12px;
  text-align: center;
}
.min_size{
    font-size: 12px;
    color: #e5e5e5;
    margin-top: 5px;
}
a{
    color: #000;
}
</style>
